@import "@styles/theme.scss";

.home-recommend {
  margin-top: 40px;
  background: #ffffff;
}

.home-recommend__title {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100px;

  &-txt {
    color: $black;
    font-size: 28px;
    line-height: 28px;
    font-weight: bold;
  }
}

.home-recommend__list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0 15px;

  &-item {
    display: flex;
    flex-direction: column;
    padding: 0 15px 40px;
    width: 50%;

    &-desc {
      padding: 0 12px;
      width: 330px;
      height: 70px;
      line-height: 70px;
      color: #9e8962;
      font-size: 24px;
      background: #f0ebe2;
      @include text-ellipsis;
    }

    &-img {
      width: 330px;
      height: 330px;
      background: #f4f4f4;
      border-radius: 4px;
    }

    &-info {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
    }

    &-name {
      color: $text-color;
      font-size: 28px;
      line-height: 40px;
      @include text-ellipsis;
    }

    &-price-wrap {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    &-price {
      color: $primary-color;
      font-size: 32px;
      line-height: 48px;
    }

    &-price--origin {
      margin-left: 14px;
      color: $text-color-lighter;
      font-size: 30px;
      font-weight: 200;
      line-height: 48px;
      text-decoration: line-through;
      text-decoration-color: $text-color-lighter;
    }

    &-commend {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-top: 10px;
      padding: 0 10px;
      height: 70px;
      border-radius: 35px;
      background: #f3f3f3;

      &-img {
        width: 50px;
        height: 50px;
        border-radius: 25px;
      }

      &-txt {
        flex: 1;
        margin-left: 10px;
        color: $text-color-lighter;
        font-size: 24px;
        line-height: 30px;
        @include lamp-clamp(2);
      }
    }
  }
}
